<template>
	<view>
		<view class="ucenter-info-block">			
			<view class="user-info-area">
				<view class="user-info-area__hd">
					<image class="img" :src="userInfo ? userInfo.avatar : '/static/default_header_img.png'" mode="aspectFill"></image>
				</view>				
				<view class="user-info-area__bd">					
					<view class="name">
						{{userInfo.nickname}}							
					</view>	
				</view>
			</view>
			<view class="app-menu-bar" v-if="userInfo.type==1">
				<view class="app-menu-bar__item" @click="jumpWallet()">
					<text class="quantity">&yen;{{amount}}</text>
					<text class="title">我的钱包</text>
				</view>				
			</view>
		</view>
		<!-- 用户信息 -->
		
		<view class="ucenter-main-wrapper">
		
			<view class="module-view-block" v-if="userInfo.type==0 || userInfo.type==1">
				<view class="module-title-bar">
					<view class="title">我的订单</view>
					<view class="more" @click="jumpOrderList(-1)">全部订单<text class="iconfont">&#xe67f;</text></view>
				</view>
				<view class="order-state-group">					
					<view class="item" @click="jumpOrderList(1)">
						<view class="icon iconfont">&#xe6ae;</view>
						<view class="name">待付款</view>						
					</view>
					<view class="item" @click="jumpOrderList(2)">
						<view class="icon iconfont">&#xe6af;</view>
						<view class="name">待消费</view>						
					</view>	
					<view class="item" @click="jumpOrderList(3)">
						<view class="icon iconfont">&#xe6b0;</view>
						<view class="name">已完成</view>						
					</view>
					<view class="item" @click="jumpOrderList(4)">
						<view class="icon iconfont">&#xe6b0;</view>
						<view class="name">退款单</view>						
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			
			<view class="module-view-block" v-if="userInfo.type==0 || userInfo.type==1">
				<view class="module-title-bar">
					<view class="title">分销商</view>
				</view>
				<view class="distributor-entry-area">
					<image class="hd" src="https://xcx.zhilvhulian.com/res/static/images/fxs_show_img.png" mode="scaleToFill"></image>
					<view class="bd" >
						<text class="tit">合作分销商</text>
						<text class="sub">赚取佣金</text>
					</view>
					<view class="fd" >
						<text class="btn" @click="toFxApply" v-if="userInfo.type==0">立即加入</text>
						<text class="btn" v-if="userInfo.type==1">分销商中心</text>
					</view>
				</view>
			</view>
			<view class="module-view-block" v-if="userInfo.type==0 || userInfo.type==2">
				<view class="module-title-bar">
					<view class="title">司机</view>
				</view>
				<view class="distributor-entry-area">
					<image class="hd" src="https://xcx.zhilvhulian.com/res/static/images/fxs_show_img.png" mode="scaleToFill"></image>
					<view class="bd">
						<text class="tit">成为司机</text>						
					</view>
					<view class="fd">
						<text class="btn" @click="toDrApply" v-if="userInfo.type==0">立即加入</text>
						<text class="btn" v-if="userInfo.type==2">司机中心</text>
					</view>
				</view>
			</view>
		</view>
		<official-account></official-account>
	</view>	
</template>

<script>	
	var app = getApp();
	import {apiUrl} from '@/api/base.js'
	export default {	    
		data() {
			return {	
				amount:0,
				userInfo: {}				
			}
		},		
		onLoad(opt) {
			
		},	
		onShow(){
			if (uni.getStorageSync("userInfo")) {
				this.userInfo = uni.getStorageSync("userInfo")	
				app.checkType()
			}else{
				uni.navigateTo({
					url: '/pages/my/login'					
				});
			}
			this.getUser()
		},
		methods: {
			//判断是否登录
			getUser: function() {				
				var that = this
				uni.request({
					url: apiUrl+"addons/car/user/getUser",
					data:{
						token: uni.getStorageSync('token'),
						user_id:uni.getStorageSync("userInfo").id
					},
					method:"POST",
					success:(res)=>{
						let data = res.data.data
						this.userInfo = data
						
						if(data.type==1){
							uni.request({
								url: apiUrl + "addons/car/fenxiao/getAmount",
								data: {
									user_id: uni.getStorageSync("userInfo").user_id									
								},
								method: "GET",
								success: (res) => {									
									this.amount=res.data.data
								},
								fail: (res) => {
									console.log(res)
								}
							})
						}
					},
					fail:(res)=>{
						console.log(res)
					}
					
				})
			},
			jumpWallet(){
				uni.navigateTo({
					url: '/pages/wallet/index'
				});
			},
			jumpOrderList(status){
				uni.navigateTo({
					url: '/pages/my/order?current='+status
				});
			},
			toFxApply(){
				uni.navigateTo({
					url: '/pages/fenxiao/apply'
				});
			},
			toDrApply(){
				uni.navigateTo({
					url: '/pages/driver/apply'
				});
			}
			
		}
	}
</script>

<style lang="scss">
	/**
	 * 用户信息
	 */
	.ucenter-info-block{
		height: 320rpx;
		position: relative;
		background: url("https://xcx.zhilvhulian.com/res/static/images/ucenter_hd_bg.png") center no-repeat;
		background-size: cover;
		&__message{
			color: #fff;
			position: absolute;
			top: 24rpx;
			right: 100rpx;
			.point{
				position: absolute;
				top: -4rpx;
				right: -4rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #f00;
			}
		}
		&__signin{
			color: #fff;
			position: absolute;
			top: 24rpx;
			right: 46rpx;
		}
	}
	.user-info-area{
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		position: absolute;
		top: 70rpx;
		left: 0;
		right: 0;
		&__hd{
			width: 108rpx;
			height: 108rpx;
			position: relative;
			.edit{
				color: $uni-text-color-inverse;
				width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				position: absolute;
				bottom: -6rpx;
				right: -10rpx;
				z-index: 10;
				border-radius: 50%;
				border: 2rpx solid #fff;
				font-size: $uni-font-size-base;
				background-color: $uni-bg-color-primary;
			}
			.img{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid #fff
			}
		}
		&__bd{
			flex: 1 1 auto;
			margin-left: 40rpx;
			.name{
				color: $uni-text-color-inverse;
				margin-bottom: 8rpx;
				font-size: $uni-font-size-lg;
				.level{
					display: inline-block;
					color: $uni-text-color;
					padding: 0 6rpx;
					vertical-align: middle;
					margin: -4rpx 0 0 6rpx;
					font-size: $uni-font-size-mini;
					border-radius: $uni-border-radius-base;
					background-color: $uni-bg-color;
				}
			}
			.sub{
				display: flex;
				align-items: center;
				.club{
					color: #bf3a1f;
					display: inline-block;
					padding: 2rpx 12rpx;
					font-size: $uni-font-size-mini;
					border-radius: 40rpx;
					background-color: #fee7e0;
					.iconfont{
						color: #ff8a5f;
						vertical-align: middle;
						/* #ifdef H5 */
						margin-top: -4rpx;
						/* #endif */
						margin-right: 6rpx;
						font-size: $uni-font-size-sm;
					}
				}
			}
		}
	}
	.app-menu-bar{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 20rpx;
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 0;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
		&__item{
			flex: 1 1 auto;
			text-align: center;
			.quantity{
				font-size: $uni-font-size-lg;
				font-family: Arial, Helvetica, sans-serif;
			}
			.title{
				color: $uni-text-color-grey;
				display: block;
				margin-top: 4rpx;
				font-size: $uni-font-size-sm;
				&:after{
					content: "";
					display: inline-block;
					width: 0;
					height: 0;
					margin-left: 8rpx;
					border-left: 8rpx solid #c9c9c9;
					border-top: 8rpx solid transparent;
					border-bottom: 8rpx solid transparent
				}
			}
		}
	}
	
	.ucenter-main-wrapper{
		padding: 20rpx 24rpx
	}
	
	/* 模块 */
	.module-view-block{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background: #fff;
		.module-title-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			position: relative;
			&:after{
				content: "";
				display: block;
				height: 2rpx;
				position: absolute;
				left: 24rpx;
				right: 24rpx;
				bottom: 0;
				transform: scaleY(.5);
				background-color: $uni-border-color;
			}
			.title{
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			.more{
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
				.iconfont{
					font-size: 26rpx;
				}
			}
		}
	}
	
	/* 我的订单 */
	.order-state-group{
		display: flex;
		justify-content: space-between;
		align-items: top;
		padding: 36rpx 0;
		.item{
			width: 20%;
			text-align: center;
			position: relative;
			.icon{
				display: inline-block;
				width: 60rpx;
				font-size: 36rpx;
			}
			.name{
				margin-top: 8rpx;
				font-size: 24rpx;
			}
			.point{
				position: absolute;
				top: 0;
				left: 60%;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #f00;
			}
		}
	}
	
	/* 分销商 */
	.distributor-entry-area{
		display: flex;
		align-items: center;
		padding: 24rpx;
		.hd{
			flex: 0 0 auto;
			width: 130rpx;
			height: 120rpx
		}
		.bd{
			flex: 1 1 auto;
			margin-left: 28rpx;
			.tit{
				display: block;
				font-size: $uni-font-size-sm;
			}
			.sub{
				color: $uni-text-color-grey;
				display: block;
				/* #ifdef H5 */
				width: 200%;
				margin-top: -20rpx;
				transform: scale(.5);
				transform-origin: left bottom;
				font-size: 40rpx;
				/* #endif */
				/* #ifndef H5 */
				margin-top: 6rpx;
				font-size: $uni-font-size-mini;
				/* #endif */
			}
		}
		.fd{
			flex: 0 0 auto;
			.btn{
				color: #ff401a;
				padding: 8rpx 24rpx;
				border: 2rpx solid #ff401a;
				border-radius: 60rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}
	
	/* 出行工具 */
	.tools-view-group{
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 0;
		&__item{
			width: 25%;
			padding: 16rpx 0;
			text-align: center;
			.iconfont{
				color: #89909b;
				font-size: 40rpx;
			}
			.name{
				color: #555;
				display: block;
				margin-top: 4rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}
	
	.login-h5-link{
		color: $uni-color-primary;
		display: inline-block;
		padding: 12rpx 20rpx;
		border-radius: 80rpx;
		background-color: $uni-bg-color;
		font-size: $uni-font-size-base;
	}
	
	.login-btn{
		color: $uni-color-primary !important;
		display: inline-block !important;
		line-height: 1 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 80rpx !important;
		background-color: $uni-bg-color !important;
		font-size: $uni-font-size-base !important;
	}
	
</style>
